import React, {
  useEffect,
  forwardRef,
  useImperativeHandle,
  useState,
  useRef,
} from 'react';
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import styles from './echart.less';

const LineEcharts = () => {
  let chartRef = useRef(null);
  let chartRef2 = useRef(null);
  let chartRef3 = useRef(null);

  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false,
        },
        brush: {
          type: ['lineX', 'clear'],
        },
      },
    },
    brush: {
      xAxisIndex: 'all',
      brushLink: 'all',
      brushMode: 'single',
      outOfBrush: {
        colorAlpha: 0.1,
      },
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100,
      },
      {
        show: true,
        type: 'slider',
        top: '85%',
        start: 0,
        end: 100,
      },
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
      },
    ],
  };
  useEffect(() => {
    const echartsInstance = chartRef.current.getEchartsInstance();
    const echartsInstance2 = chartRef2.current.getEchartsInstance();
    const echartsInstance3 = chartRef3.current.getEchartsInstance();
    console.log(echartsInstance, 'echartsInstance');
    echarts.connect([echartsInstance, echartsInstance2, echartsInstance3]);
    echartsInstance.dispatchAction({
      type: 'brush',
      areas: [
        {
          brushType: 'lineX',
          coordRange: ['Sat', 'Sun'],
          xAxisIndex: 0,
        },
      ],
    });
  }, []);
  return (
    <div>
      <div
        className={styles.base_disposal}
        key="电流"
        style={{ marginTop: '24px' }}
      >
        <div className={styles.disposal_header}>
          <div className={styles.disposal_bar}></div>
          <div className={styles.disposal_title}>电流</div>
          <img className={styles.disposal_picture} src="" />
        </div>
        <div className={styles.disposal_dates} style={{ width: '100%' }}>
          <ReactEcharts
            key="1"
            width="100%"
            style={{ width: '100%' }}
            option={option}
            notMerge={true}
            group="group"
            lazyUpdate={true}
            ref={chartRef}
          />
        </div>
      </div>
      <div
        className={styles.base_disposal}
        key="电压"
        style={{ marginTop: '24px' }}
      >
        <div className={styles.disposal_header}>
          <div className={styles.disposal_bar}></div>
          <div className={styles.disposal_title}>电压</div>
          <img className={styles.disposal_picture} src="" />
        </div>
        <div className={styles.disposal_dates} style={{ width: '100%' }}>
          <ReactEcharts
            key="2"
            width="100%"
            style={{ width: '100%' }}
            option={option}
            notMerge={true}
            group="group"
            lazyUpdate={true}
            ref={chartRef2}
          />
        </div>
      </div>

      <div
        className={styles.base_disposal}
        key="剩余电量"
        style={{ marginTop: '24px' }}
      >
        <div className={styles.disposal_header}>
          <div className={styles.disposal_bar}></div>
          <div className={styles.disposal_title}>剩余电量</div>
          <img className={styles.disposal_picture} src="" />
        </div>
        <div className={styles.disposal_dates} style={{ width: '100%' }}>
          <ReactEcharts
            key="3"
            width="100%"
            style={{ width: '100%' }}
            option={option}
            notMerge={true}
            group="group"
            lazyUpdate={true}
            ref={chartRef3}
          />
        </div>
      </div>
    </div>
  );
};
export default LineEcharts;
